import React, { useEffect, useRef } from 'react';
import './Selection.less';
import BellaHeader from '@/components/header';
import { FootToolbar } from '@/components/footToolbar';
import { ArrowRightOutlined, udp } from '@cscec/udp-mobile-ui/es/util';
import ReadOutlined from '@ant-design/icons/lib/icons/ReadOutlined';
import GameControllerIconAlternative from '@/components/GameControllerIconAlternative';

const KB2Selection: React.FC = () => {
  const cardsRef = useRef<HTMLDivElement[]>([]);
  const {id,name,imgurl} = udp.getQueryValue()

  // 初始化卡片动画
  useEffect(() => {
    const cards = cardsRef.current;
    cards.forEach((card, index) => {
      if (card) {
        card.style.opacity = '0';
        card.style.transform = 'translateY(15px)';
        setTimeout(() => {
          card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
          card.style.opacity = '1';
          card.style.transform = 'translateY(0)';
        }, 100 + (index * 200));
      }
    });
  }, []);

  // 处理卡片点击
  const handleCardClick = (type: 'study' | 'game') => {
    const card = cardsRef.current[type === 'study' ? 0 : 1];
    if (card) {
      card.classList.add('scale-95');
      setTimeout(() => {
        card.classList.remove('scale-95');
        
        if (type === 'study') {
          udp.open('/Schme', { id: id, name: name, imgurl:imgurl })
        } else {
         udp.open('/WordGame',{id:id});
        }
      }, 150);
    }
  };

  // 添加卡片到ref数组
  const addToCardsRef = (el: HTMLDivElement | null, index: number) => {
    if (el && !cardsRef.current.includes(el)) {
      cardsRef.current[index] = el;
    }
  };

  return (
    <div className="kb2-selection-container">
      {/* 头部 */}
      <BellaHeader title={name} />

      {/* 主要内容区 */}
      <main className="main-content">
        <div className="cards-grid">
          {/* 教材学习卡片 */}
          <div 
            ref={(el) => addToCardsRef(el, 0)}
            className="study-card card-bounce"
            onClick={() => handleCardClick('study')}
          >
            <div className="card-decoration decoration-1 floating"></div>
            <div className="card-decoration decoration-2 floating-delay-1"></div>
            
            <div className="card-content">
              <div className="icon-wrapper study-icon">
                <ReadOutlined className="card-icon" style={{
                  color:"rgb(30 183 216)"
                }} />
              </div>
              <h2 className="card-title">教材学习</h2>
              <p className="card-description">按单元系统学习，包含课文、练习和知识点讲解</p>
              
              <div className="progress-dots">
                <div className="dot active"></div>
                <div className="dot active"></div>
                <div className="dot"></div>
                <div className="dot"></div>
                <div className="dot"></div>
              </div>
              
              <div className="action-button study-action">
                <ArrowRightOutlined className="action-icon" style={{
                  color:"rgb(30 183 216)"
                }}/>
              </div>
            </div>
          </div>

          {/* 单词消消乐卡片 */}
          <div 
            ref={(el) => addToCardsRef(el, 1)}
            className="game-card card-bounce"
            onClick={() => handleCardClick('game')}
          >
            <div className="card-decoration game-star star-1 floating">
              ★
            </div>
            <div className="card-decoration game-star star-2 floating-delay-1">
              ★
            </div>
            <div className="card-decoration game-star star-3 floating-delay-2">
              ★
            </div>
            
            <div className="card-content">
              <div className="icon-wrapper game-icon">
                <GameControllerIconAlternative 
                  // size={20} 
                  color="rgb(30 183 216)" 
                  className="card-icon"
                />
              </div>
              <h2 className="card-title">单词消消乐</h2>
              <p className="card-description">通过趣味游戏闯关，巩固本单元重点单词</p>
              
              <div className="progress-dots game-dots">
                <div className="dot game-dot active"></div>
                <div className="dot game-dot"></div>
                <div className="dot game-dot"></div>
              </div>
              
              <div className="action-button game-action">
                <ArrowRightOutlined className="action-icon" style={{
                  color:"rgb(30 183 216)"
                }}/>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* 底部导航 */}
      <FootToolbar />
    </div>
  );
};

export default KB2Selection;